﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="/lib/vue/vue.js"></script>
    <link href="/lib/view-design/styles/iview.min.css" rel="stylesheet" />
    <script src="/lib/view-design/iview.min.js"></script>
    <link href="css/login.css" rel="stylesheet" />
</head>
<style>
    body {
        background: #ccc;
    }
    .sign-main{
        width:400px;
        margin:50px auto;
        padding: 0 16px;
    }
    #vaptcha_container{
        height: 36px;
        border-radius:4px;
        background:#2d8cf0;
    }
    .head{
        text-align: center;
    }
    .dev-sign-main-aside{
        margin-top: 32px;
    }
    .dev-sign-main-aside-tip{
       text-align: center;
       margin: 32px 0 16px;
    }
</style>

<body>
    <div id="app">
        <row type="flex" align="middle" justify="center">
            <i-col span="24">
                <div>
                    <Card :bordered="false" dis-hover shadow class="sign-main">
                        <div slot="title" class="head">用户登录</div>
                        <i-form label-position="top">
                            <form-item label="邮箱" required>
                                <i-input size="large" prefix="ios-contact"></i-input>
                            </form-item>
                            <form-item label="你好" required>
                                <i-input size="large" prefix="ios-lock-outline" suffix="ios-eye"></i-input>
                            </form-item>
                        </i-form>
                        <div id="vaptcha_container">
                            滑动验证
                        </div>
                        <div style="margin-top:32px">
                            <i-button type="success" long size="large">登录</i-button>
                            <div class="dev-sign-main-aside-tip">
                               <p><a><Icon type="ios-chatbubbles" size="24"/></a></p>                               
                            </div>
                        </div>
                    </Card>
                </div>
            </i-col>
        </row>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {
            }
        })
    </script>

</body>

</html>